<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item  :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <div>
            <el-button style="margin-bottom: 20px" type="primary" size="medium"
            @click="$router.push('/sys-admin/product/pet/add-new')">添加宠物</el-button>
        </div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="60"
                        align="center">
                </el-table-column>


                <el-table-column
                        prop="name"
                        label="名称"
                        show-overflow-tooltip
                        width="180"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="zhuangtai"
                        label="状态"
                        show-overflow-tooltip=""
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="xingbie"
                        label="性别"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="birth"
                        label="出生日"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="colour"
                        label="发色"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="chushengdi"
                        label="出生地"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="yimiao"
                        label="疫苗"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="xuetong"
                        label="血统书"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="jiage"
                        label="价格"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="tizhong"
                        label="体重"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="tzceshiri"
                        label="体重测试日"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="xingge"
                        label="性格"
                        width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" circle
                               @click="openEditDialog(scope.row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                               @click="openDeleteConfirm(scope.row)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        <div style="text-align: right;margin: 10px auto">
            <el-pagination
                    @current-change="changePage"
                    layout="total,prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize">
            </el-pagination>
        </div>


        <el-dialog title="修改宠物" :visible.sync="dialogFormVisible">
            <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px">

                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="zhuangtai">
                    <el-input v-model="editForm.zhuangtai"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="xingbie">
                    <el-input v-model="editForm.xingbie"></el-input>
                </el-form-item>
                <el-form-item label="出生日" prop="birth">
                    <el-input v-model="editForm.birth"></el-input>
                </el-form-item>
                <el-form-item label="发色" prop="colour">
                    <el-input v-model="editForm.colour"></el-input>
                </el-form-item>
                <el-form-item label="出生地" prop="chushengdi">
                    <el-input v-model="editForm.chushengdi"></el-input>
                </el-form-item>
                <el-form-item label="疫苗" prop="yimiao">
                    <el-input v-model="editForm.yimiao"></el-input>
                </el-form-item>
                <el-form-item label="血统书" prop="xuetong">
                    <el-input v-model="editForm.xuetong"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="jiage">
                    <el-input v-model="editForm.jiage"></el-input>
                </el-form-item>
                <el-form-item label="体重" prop="tizhong">
                    <el-input v-model="editForm.tizhong"></el-input>
                </el-form-item>
                <el-form-item label="体重测试日" prop="tzceshiri">
                    <el-input v-model="editForm.tzceshiri"></el-input>
                </el-form-item>
                <el-form-item label="性格" prop="xingge">
                    <el-input v-model="editForm.xingge"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEditForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                total:0,
                pageSize:0,
                currentPage:1,
                dialogFormVisible:false,
                editForm:{
                    id: '',

                    name: '',
                    zhuangtai:'',
                    xingbie:'',
                    birth:'',
                    colour:'',
                    chushengdi:'',
                    yimiao:'',
                    xuetong:'',
                    jiage:'',
                    tizhong:'',
                    tzceshiri:'',
                    xingge:'',
                },
                rules: {

                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
                    ],
                    zhuangtai:[],
                    xingbie: [],
                    birth: [],
                    colour: [],
                    chushengdi: [],
                    yimiao: [],
                    xuetong: [],
                    jiage: [],
                    tizhong: [],
                    tzceshiri: [],
                    xingge: []

                }
                }
            },
        methods:{
            openEditDialog(pet) {
                let url = 'http://localhost:9080/pet/standard?id=' + pet.id;
                console.log('url = ' + url);

                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.editForm = jsonResult.data;
                        this.dialogFormVisible = true;
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadAlbumList();
                            }
                        });
                    }
                });
            },

            submitEditForm() {
                let url = 'http://localhost:9080/pet/update';
                console.log('url = ' + url);

                let formData = this.qs.stringify(this.editForm);
                console.log('formData = ' + formData);

                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改宠物成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loadAlbumList();
                    } else if (jsonResult.state == 40400){
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loadAlbumList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                });
            },

            openDeleteConfirm(pet){
                this.$confirm('此操作将永久删除【' + pet.id + '-' + pet.name + '】宠物，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(pet);
                }).catch(() => {
                });
            },
            handleDelete(pet){
                let url ='http://localhost:9080/pet/delete';
                console.log('url = '+url);

                let formData = 'id=' +pet.id;
                console.log('formData = '+formData);

                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .post(url,formData).then((response) => {
                    let jsonResult=response.data;
                    if (jsonResult.state== 20000){
                        this.$message({
                            message: '删除宠物成功！',
                            type: 'success'
                        });
                        this.loadAlbumList();
                        }else if (jsonResult.state==40400){
                        this.$alert(jsonResult.message,'错误',{
                            confirmButtonText:'确定',
                            callback:action => {
                            this.loadAlbumList();
                        }
                    });
                    }else if (jsonResult.state == 40900) {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                    });
                },

            changePage(value){
                this.$router.replace('?page='+value);
                this.loadAlbumList();
            },
            loadAlbumList(){
                let page=this.$router.currentRoute.query.page;
                if (!page){
                    page=1;
                }
                let url='http://localhost:9080/pet/list?page='+page;
                console.log('url = '+url);

                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                        'headers': {
                            'Authorization': localJwt
                        }
                    })
                    .get(url).then((response) => {
                    let jsonResult=response.data;
                    if (jsonResult.state==20000){
                        this.tableData=jsonResult.data.list;
                        this.total = jsonResult.data.total;
                        this.pageSize = jsonResult.data.pageSize;
                        this.currentPage = jsonResult.data.currentPage;
                    }else {
                        this.$alert(jsonResult.message, '错误', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                })
            }
        },
        mounted() {
            this.loadAlbumList();
        }
    }
</script>

<style scoped>
    .el-breadcrumb{
        font-size: 20px;
    }
</style>

